<template> 
    <div class="spare-parameter-maintenance-page">
        <el-form :inline="true" :model="formInline" class="demo-form-inline" style="border-bottom:1px solid #ccc;">
            <!--备件小类 -->
             <el-form-item :label="nowLangue.spareSubClass" class="selectMB10">
                <el-select size="mini" clearable v-model="formInline.subClassCode" @change="getParmNameList(formInline)" :placeholder="nowLangue.pleaseSelect">
                    <el-option v-for="(status,index) in spareClassList" :key="index" :label="status.name" :value="status.code"></el-option>
                </el-select>
            </el-form-item>
            <!-- 参数名称 -->
             <el-form-item :label="nowLangue.parameterName" class="selectMB10">
                <el-select size="mini" clearable v-model="formInline.propertyId" :placeholder="nowLangue.pleaseSelect">
                    <el-option v-for="(parmName,index) in formInline.parmNameList" :key="index" :label="parmName.name" :value="parmName.id"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item class="selectMB10">
                <el-button class="bolder outsideBtnBS selectAll" :disabled="selectDisabled" size="mini" type="danger" @click="querySpareParm()" v-text="nowLangue.query"></el-button>
            </el-form-item>
        </el-form>
        <!--表格  备件参数明细-->
        <label class="default-label" v-text="nowLangue.spareParameterList"></label>
        <!--新增按钮-->
        <el-button class="bolder outsideBtnBS" size="mini" type="danger" @click="createNew()" v-text="nowLangue.create"></el-button>
        <el-table :data="tableData" border style="width: 100%;" v-loading.body="loading" element-loading-text="拼命加载中">
            <!--序-->
            <el-table-column type="index" header-align="center" align="center" :label="nowLangue.sequence" width="40"></el-table-column>
            <!--操作-->
            <el-table-column :label="nowLangue.operate" header-align="center" align="center" width="100">
                <template scope="scope">
                    <!--禁用-->
                    <div class="operationItem bolder" v-if="scope.row.status" @click="handleStatus(scope.$index,scope.row)" v-text="nowLangue.forbidden"></div>
                    <!--启用-->
                    <div class="operationItem bolder" v-else @click="handleStatus(scope.$index,scope.row)" v-text="nowLangue.enable"></div> 
                    <!--修改-->
                    <div class="operationItem disabled bolder" v-if="scope.row.status" v-text="nowLangue.update"></div>
                    <!--修改-->
                    <div class="operationItem bolder" v-else @click="handleUpdate(scope.$index,scope.row)" v-text="nowLangue.update"></div>
                </template>
            </el-table-column>
            <!--备件小类-->
            <el-table-column prop="subClassName" :label="nowLangue.spareSubClass" header-align="center" width="100" show-overflow-tooltip></el-table-column>
            <!--参数名称-->
            <el-table-column prop="propertyName" :label="nowLangue.parameterName" header-align="center" show-overflow-tooltip></el-table-column>
            <!--参数值-->
            <el-table-column prop="value" :label="nowLangue.parameterValue" header-align="center" width="100" show-overflow-tooltip></el-table-column>
            <!--参数单位-->
            <el-table-column prop="propertyUnit" :label="nowLangue.paramterUnit" header-align="center" width="100" show-overflow-tooltip></el-table-column>
            <!--创建人-->
            <el-table-column prop="creatorName" :label="nowLangue.founder" header-align="center" width="100" show-overflow-tooltip></el-table-column>
            <!--创建时间-->
            <el-table-column prop="createTime" :label="nowLangue.creationTime" header-align="center" show-overflow-tooltip></el-table-column>
            <!--修改人-->
            <el-table-column prop="updaterName" :label="nowLangue.modifier" header-align="center" width="100" show-overflow-tooltip></el-table-column>
            <!--修改时间-->
            <el-table-column prop="updateTime" :label="nowLangue.modificationTime" header-align="center" width="100" show-overflow-tooltip></el-table-column>
        </el-table>
        <!--分页-->
        <el-pagination v-if="isPaging" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pageIndex"  :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :page-count="totalPage" :total="totalNumber"></el-pagination>
        <!--新增备件参数-->
        <el-dialog :title="nowLangue.create+nowLangue.spareParameterValue" :visible.sync="dialogForm1Visible" size="tiny" :lock-scroll="false">
            <el-form :inline="true" :model="addSpareParmForm" class="demo-form-inline label-minW95" style="border-bottom:1px solid #ccc;" ref="addSpareParmForm"> <!--  :rules="rules" -->
                <!--备件小类-->
                <el-form-item :label="nowLangue.spareSubClass" prop="subClassCode"  :rules="[{ required: true, message: nowLangue.pleaseImport}]">
                    <el-select size="mini" clearable v-model="addSpareParmForm.subClassCode" @change="getParmNameList(addSpareParmForm)" :placeholder="nowLangue.pleaseSelect">
                        <el-option v-for="(status,index) in spareClassList" :key="index" :label="status.name" :value="status.code"></el-option>
                    </el-select>
                </el-form-item>
                <!--参数名称-->
                <el-form-item :label="nowLangue.parameterName" prop="propertyId"  :rules="[{ required: true, message: nowLangue.pleaseImport}]">
                    <el-select size="mini" clearable v-model="addSpareParmForm.propertyId" :placeholder="nowLangue.pleaseSelect" @change="showParmUnit(addSpareParmForm)">
                        <el-option v-for="(parmName,index) in addSpareParmForm.parmNameList" :key="index" :label="parmName.name" :value="parmName.id"></el-option>
                    </el-select>
                </el-form-item>
                <!--参数值-->
                <el-form-item :label="nowLangue.parameterValue" prop="value"  :rules="[{ required: true, message: nowLangue.pleaseImport}]">
                    <el-input  v-model.trim="addSpareParmForm.value" :placeholder="nowLangue.pleaseImport+' '+nowLangue.parameterValue"></el-input>
                </el-form-item>
                <!--参数单位-->
                <el-form-item :label="nowLangue.paramterUnit">
                    <el-input disabled v-model.trim="addSpareParmForm.unit" :placeholder="nowLangue.pleaseImport+' '+nowLangue.paramterUnit"></el-input>
                </el-form-item>
                <!--状态-->
                <el-form-item :label="nowLangue.status">
                    <el-radio-group v-model="addSpareParmForm.status">
                        <el-radio :label="true" v-cloak>{{nowLangue.enable}}</el-radio>
                        <el-radio :label="false" v-cloak>{{nowLangue.forbidden}}</el-radio>
                    </el-radio-group>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button class="bolder outsideBtnBS" :disabled="saveDisabled" size="mini" type="danger" @click="saveSpareParm" v-text="nowLangue.sure"></el-button>
                <el-button class="bolder outsideBtnBS" size="mini" type="danger" @click="cancleSpareParm" v-text="nowLangue.cancel"></el-button>
            </div>
        </el-dialog>
        <!--修改备件参数-->
        <el-dialog  :title="nowLangue.update+nowLangue.spareParameterValue" :visible.sync="dialogForm2Visible" size="tiny" :lock-scroll="false">
            <el-form :inline="true" :model="updateSpareParmForm" class="demo-form-inline label-minW95" style="margin-bottom:20px;border-bottom:1px solid #ccc;" ref="updateSpareParmForm">
                <!--备件小类-->
                <el-form-item :label="nowLangue.spareSubClass" prop="subClassCode"  :rules="[{ required: true, message:nowLangue.pleaseImport}]">
                    <el-select size="mini" clearable v-model="updateSpareParmForm.subClassCode" @change="getParmNameList(updateSpareParmForm)" :placeholder="nowLangue.pleaseSelect">
                        <el-option v-for="(status,index) in spareClassList" :key="index" :label="status.name" :value="status.code"></el-option>
                    </el-select>
                </el-form-item>
                <!--参数名称-->
                <el-form-item :label="nowLangue.parameterName" prop="propertyId"  :rules="[{ required: true, message:nowLangue.pleaseImport}]">
                    <el-select size="mini" clearable v-model="updateSpareParmForm.propertyId" :placeholder="nowLangue.pleaseSelect" @change="showParmUnit(updateSpareParmForm)">
                        <el-option v-for="(parmName,index) in updateSpareParmForm.parmNameList" :key="index" :label="parmName.name" :value="parmName.id"></el-option>
                    </el-select>
                </el-form-item>
                <!--参数值-->
                <el-form-item :label="nowLangue.parameterValue" prop="value"  :rules="[{ required: true, message:nowLangue.pleaseImport}]">
                    <el-input  v-model.trim="updateSpareParmForm.value" :placeholder="nowLangue.pleaseImport+nowLangue.parameterValue" ></el-input>
                </el-form-item>
                <!--参数单位-->
                <el-form-item :label="nowLangue.paramterUnit" prop="unit"  :rules="[{ required: true, message:nowLangue.pleaseImport}]">
                    <el-input disabled v-model.trim="updateSpareParmForm.unit" :placeholder="nowLangue.pleaseImport+nowLangue.paramterUnit"></el-input>
                </el-form-item>
                <!--状态-->
                <el-form-item :label="nowLangue.status">
                    <el-radio-group v-model="updateSpareParmForm.status">
                        <el-radio :label="true" v-cloak>{{nowLangue.enable}}</el-radio>
                        <el-radio :label="false" v-cloak>{{nowLangue.forbidden}}</el-radio>
                    </el-radio-group>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <!--保存-->
                <el-button class="bolder outsideBtnBS" :disabled="updateDisabled" size="mini" type="danger" @click="saveUpdateSpareParm" v-text="nowLangue.sure"></el-button>
                <!--取消-->
                <el-button class="bolder outsideBtnBS" size="mini" type="danger" @click="cancelUpdateSpareParm" v-text="nowLangue.cancel"></el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
       export default {
        data() {
            return {
                language:{
                    zh:{
                        "pleaseSelect":"请选择",
                        "pleaseImport":"请输入",
                        "query":"查询",
                        "spareSubClass":"备件小类",
                        "parameterName":"参数名称",
                        "spareParameterList":"备件参数明细",
                        "create":"新增",
                        "sequence":"序",
                        "operate":"操作",
                        "forbidden":"禁用",
                        "enable":"启用",
                        "update":"修改",
                        "parameterType":"参数类型",
                        "paramterUnit":"参数单位",
                        "founder":"创建人",
                        "creationTime":"创建时间",
                        "modifier":"修改人",
                        "modificationTime":"修改时间",
                        "parameterValue":"参数值",
                        "spareParameterValue":"备件参数值",
                        "status":"状态",
                        "save":"保存",
                        "cancel":"取消",
                        "sure":"确定",
                    },
                    en:{
                        "pleaseSelect":"please Select",
                        "pleaseImport":"please Import",
                        "query":"query",
                        "spareSubClass":"spare SubClass",
                        "parameterName":"parameter Name",
                        "spareParameterList":"spare Parameter List",
                        "create":"create",
                        "sequence":"sequence",
                        "operate":"operate",
                        "forbidden":"forbidden",
                        "enable":"enable",
                        "update":"update",
                        "parameterType":"parameter Type",
                        "paramterUnit":"paramter Unit",
                        "founder":"founder",
                        "creationTime":"creation Time",
                        "modifier":"modifier",
                        "modificationTime":"modification Time",
                        "parameterValue":"parameter Value",
                        "spareParameterValue":"spare Parameter Value",
                        "status":"status",
                        "save":"save",
                        "cancel":"cancel",
                        "sure":"sure",

                    }
                },
                nowLangue:{},
                spareClassList:[],//备件小类集合

                // 查询表单
                formInline:{
                    parmNameList:[],//参数名称集合
                    subClassCode:"",//备件小类编码
                    propertyId:"",//参数名称ID
                },
                statusLists:[],   //当前状态下拉列表
                addSpareParmForm:{
                    parmNameList:[],//参数名称集合
                    propertyId:"",//参数名称ID
                    value:"",//参数值
                    unit:"",//参数单位
                    subClassCode:"",//小类编码
                    subClassName:"",//小类名称
                    status:true
                },
                updateSpareParmForm:{
                    parmNameList:[],//参数名称集合
                    id:"",//修改记录ID
                    propertyId:"",//参数名称ID
                    value:"",//参数值
                    unit:"",//参数单位
                    subClassCode:"",//小类编码
                    subClassName:"",//小类名称
                    status:true
                },
                tableData:[],//备件参数明细
                //弹窗
                dialogForm1Visible:false,
                dialogForm2Visible:false,
                // 分页
                loading:false,
                isPaging:false,
                pageIndex:1,    //当前页（必传）
                pageSize :10,   //每页多少条
                totalNumber: 20,
                totalPage:2,
                
                //禁用
                selectDisabled:false,
                saveDisabled:false,
                updateDisabled:false,
            };
        },
        created:function(){
            var _this=this;
            _this.languageType=="zh"?_this.nowLangue=_this.language.zh:_this.nowLangue=_this.language.en;
        },
        computed:{
            languageType(){
                return this.$store.state.languageType;
            }
        },
        watch:{
            languageType(){
                var _this=this;
                _this.languageType=="zh"?_this.nowLangue=_this.language.zh:_this.nowLangue=_this.language.en;
            }
        },
       //进入页面立即运行此方法
       mounted: function () {
            var _this = this;
            _this.$store.commit('currentActive', 'SpareParameterMaintenance');
            _this.dropSpareList();
            _this.querySpareParm();    //表单查询
       },
        methods:{
            // 备件小类查询
            dropSpareList(){
                var _this=this;
                $.ajax({
                    type:'GET',
                    url:_this.metadata_service+'subClass/findSubClassList',
                    cache:false,
                    dataType:'JSON',
                    contentType:"application/json;charset=utf-8",
                    success:function(data){
                        if(data.success){
                            _this.spareClassList=data.data;
                        }else{
                            _this.common.errorTip(data.errorMessage);
                        }
                    }
                })
            },
            //备件小类change事件
            getParmNameList(formName){
                for(var i=0;i<this.spareClassList.length;i++){
                    if(formName.subClassCode==this.spareClassList[i].code){
                        formName.subClassName=this.spareClassList[i].name;
                    }
                }
                if(formName.subClassCode==null || formName.subClassCode==""){
                    formName.propertyId="";
                }
                this.dropParmName(formName);
            },
            // 参数名称查询
            dropParmName(formName){
                var _this=this;
                $.ajax({
                    type:'GET',
                    url:_this.metadata_service+'materialProperty/findMaterialPropertyListBySubClassCode?subClassCode='+formName.subClassCode,
                    cache:false,
                    dataType:'JSON',
                    contentType:"application/json;charset=utf-8",
                    success:function(data){
                        if(data.success){
                            formName.parmNameList=data.data;
                        }else{
                            _this.common.errorTip(data.errorMessage);
                        }
                    }
                })
            },
            //参数单位的显示
            showParmUnit(formName){
                for(var i=0;i<formName.parmNameList.length;i++){
                    if(formName.propertyId==formName.parmNameList[i].id){
                        formName.unit=formName.parmNameList[i].unit;
                    }
                }
            },
            //查询备件参数列表
            querySpareParm(){
                var _this=this;
                _this.selectDisabled=true;
                 _this.loading=true;
                var tmp={
                    subClassCode:_this.formInline.subClassCode,
                    propertyId:_this.formInline.propertyId,
                    pageIndex:_this.pageIndex,
                    pageSize:_this.pageSize
                };
                 $.ajax({
                     type: 'POST',
                     url: _this.metadata_service+"materialPropertyValue/queryPage",
                     cache: false,
                     data:JSON.stringify(tmp),
                     dataType:'JSON',
                     contentType: "application/json;charset=utf-8",
                     success: function (data) {
                         _this.selectDisabled=false;
                         _this.loading=false;
                         if (data.success) {
                             _this.isPaging=true;
                             _this.totalPage=data.data.totalPage;
                             _this.totalNumber=data.data.totalNumber;
                             _this.tableData=data.data.dataList;
                         }else{
                             _this.common.errorTip(data.errorMessage)
                         }
                     },
                     error:function(){
                         _this.selectDisabled=false;
                     }
                 });
            },
            //新增
            createNew(){
                var _this=this;
                _this.dialogForm1Visible=true; 
                if(this.$refs['addSpareParmForm']) {
                    this.$refs['addSpareParmForm'].resetFields();
                }
                _this.addSpareParmForm.propertyId="";
                _this.addSpareParmForm.value="";
                _this.addSpareParmForm.subClassCode="";
                _this.addSpareParmForm.subClassName="";
                _this.addSpareParmForm.status=true;
            },
            //新增保存
            saveSpareParm(){
                var _this=this;
                 _this.$refs["addSpareParmForm"].validate((valid) => {
                     if (valid) {
                         _this.saveDisabled=true;
                         var tmp={
                             propertyId:_this.addSpareParmForm.propertyId,
                             value:_this.addSpareParmForm.value,
                             subClassCode:_this.addSpareParmForm.subClassCode,
                             subClassName:_this.addSpareParmForm.subClassName,
                             status:_this.addSpareParmForm.status,
                         };
                         $.ajax({
                             type: 'POST',
                             url: _this.metadata_service+"materialPropertyValue/add",
                             cache: false,
                             data:JSON.stringify(tmp),
                             dataType:'JSON',
                             contentType: "application/json;charset=utf-8",
                             success: function (data) {
                                 _this.saveDisabled=false;
                                 if (data.success) {
                                     var successMessage=_this.languageType=="zh"?'保存成功！':'Save Success';
                                     _this.common.successTip(successMessage);
                                     _this.dialogForm1Visible=false;
                                     _this.querySpareParm();
                                 }else{
                                     _this.common.errorTip(data.errorMessage);
                                 }
                             },
                             error:function(){
                                 _this.saveDisabled=false;
                             }
                         });
                     } else {
                         var err=_this.languageType=="zh"?'存在未填写的必填项！':'Have Empty';
                         _this.common.errorTip(err);
                         return false;
                     }
                 });
            },
            //新建取消
            cancleSpareParm(){
                var _this=this;
                _this.dialogForm1Visible=false;
                if(this.$refs['addSpareParmForm']) {
                    this.$refs['addSpareParmForm'].resetFields();
                }
                _this.addSpareParmForm.taxCode="";
                _this.addSpareParmForm.taxDec="";
                _this.addSpareParmForm.tax="";
                _this.addSpareParmForm.status=false;
            },
            // 操作启用禁用
            handleStatus(index, row){
                var _this=this;
                if(row.status){
                    row.status = false;
                }else{
                    row.status = true;
                }
                var tmp={id: row.id,status: row.status}; 
                 $.ajax({
                     type: 'POST',
                     url: _this.metadata_service+"materialPropertyValue/updateStatus",
                     cache: false,
                     data:JSON.stringify(tmp),
                     dataType:'JSON',
                     contentType: "application/json;charset=utf-8",
                     success: function (data) {
                         if (data.success) {
                             // 当前状态的显示
                             if(row.status){
                                 row.statusName = _this.languageType=="zh"?' 启用':'Open';
                                 var successMessage1=_this.languageType=="zh"?'启用成功！':'Open Success';
                                 _this.common.successTip(successMessage1);
                             }else{
                                 row.statusName = _this.languageType=="zh"?' 禁用':'Close';
                                 var successMessage2=_this.languageType=="zh"?'禁用成功！':'Close Success';
                                 _this.common.successTip(successMessage2);
                             }
                         }else
                             _this.common.errorTip(data.errorMessage);
                     }
                 });
            },
            //点击修改
            handleUpdate(index,row){
                var _this=this;
                _this.dialogForm2Visible=true;
                if(this.$refs['updateSpareParmForm']) {
                    this.$refs['updateSpareParmForm'].resetFields();
                 }
                 _this.updateSpareParmForm.id = row.id;
                 _this.updateSpareParmForm.propertyId = row.propertyId;
                 _this.updateSpareParmForm.unit = row.propertyUnit;
                 _this.updateSpareParmForm.value = row.value;
                 _this.updateSpareParmForm.subClassCode = row.subClassCode;
                 _this.updateSpareParmForm.subClassName = row.subClassName;
                 _this.updateSpareParmForm.status = row.status;
                this.getParmNameList(this.updateSpareParmForm);
            },
            //修改保存
            saveUpdateSpareParm(){
                var _this=this;
                 _this.$refs["updateSpareParmForm"].validate((valid) => {
                     if (valid) {
                         _this.updateDisabled=true;
                         var tmp={
                             id:_this.updateSpareParmForm.id,
                             propertyId:_this.updateSpareParmForm.propertyId,
                             value:_this.updateSpareParmForm.value,
                             subClassCode:_this.updateSpareParmForm.subClassCode,
                             subClassName:_this.updateSpareParmForm.subClassName,
                             status:_this.updateSpareParmForm.status,
                             };
                         $.ajax({
                             type: 'POST',
                             url: _this.metadata_service+"materialPropertyValue/update",
                             cache: false,
                             data:JSON.stringify(tmp),
                             dataType:'JSON',
                             contentType: "application/json;charset=utf-8",
                             success: function (data) {
                                 if (data.success) {
                                     _this.updateDisabled=false;
                                     var successMessage=_this.languageType=="zh"?'修改成功！':'Update Success';
                                     _this.common.successTip(successMessage);
                                     _this.dialogForm2Visible=false;
                                     _this.querySpareParm();
                                 }else{
                                     _this.updateDisabled=false;
                                     _this.common.errorTip(data.errorMessage);
                                 }
                             },
                             error:function(){
                                 _this.updateDisabled=false;
                             }
                         });
                     } else {
                         var err=_this.languageType=="zh"?'存在未填写的必填项！':'Have Empty';
                         _this.common.errorTip(err);
                         return false;
                     }
                 });
            },
            //修改取消
            cancelUpdateSpareParm(){
                var _this=this;
                _this.dialogForm2Visible=false;
            },
            //   分页
            handleSizeChange(val) {
                var _this=this;
                _this.pageSize=val;
                _this.querySpareParm();
            },
            //点击页码分页查询点击事件
            handleCurrentChange(val) {
                var _this=this;
                _this.pageIndex=val;
                _this.querySpareParm();
            }
        }
    }
</script>



